<template>
  <div>
    <div class="container1">
      <div class="common-title-flex">
        <div class="common-title-div"></div>
        <div class="common-title-text">栏目查询条件</div>
      </div>
      <el-form ref="searchObj" :inline="true" :model="searchObj" size="mini" label-width="100px" style="margin-bottom:-10px;margin-top:10px;">
        <el-form-item label="栏目名称">
          <el-input v-model="searchObj.name" class="police-name" placeholder="请输入栏目名称" clearable></el-input>
        </el-form-item>
        <el-form-item style="margin-left:2rem;">
          <el-button type="primary" icon="el-icon-search" @click="query">查询</el-button>
          <el-button @click="reset" icon="el-icon-refresh">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="container" style="margin-top:1rem;">
      <div class="common-list-class">
        <div style="display:flex;">
          <div class="common-title-div"></div>
          <div class="common-title-text">栏目查询列表</div>
        </div>
        <div style="display:flex;">
          <!-- <el-upload
                    v-if="typeCode == 'police'"
                    class="upload-file"
                    :headers="uploadHeader"
                    :before-upload="beforeUpload"
                    :action="uploadUrl"
                    :on-success="uploadSucess"
                    :on-error="uploadError"
                    :show-file-list="false">
                        <el-button type="primary" icon="el-icon-download">批量导入</el-button>
                    </el-upload>
                    <el-button type="primary" v-if="typeCode == 'police'" size="mini" style="height:32px;margin-left:10px;" @click="allExportClick" icon="el-icon-position">下载模版</el-button>
                    <el-button type="primary" style="height:32px;" @click="alldaochuClick" icon="el-icon-upload2">批量导出</el-button> -->
          <el-button type="primary" style="height:32px;" icon="el-icon-circle-plus-outline" @click="addPolice">添加</el-button>
        </div>
      </div>
      <!-- 查询列表 -->
      <el-table :data="tableData" size="mini" :row-style="rowStyle" :header-cell-style="tableHeaderColor" style="width: 100%;margin-top:10px;margin-bottom:10px;" max-height="550" border>
        <el-table-column prop="id" label="ID" show-overflow-tooltip align="center">
        </el-table-column>
        <el-table-column prop="attachmentAddr" label="图片" align="center">
          <template slot-scope="scope">
            <el-image style="width: 50px; height: 30px;" fit="contain" :src="scope.row.attachmentAddr"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="adTitle" label="栏目姓名" show-overflow-tooltip align="center">
        </el-table-column>
        <el-table-column prop="adInks" label="栏目链接" show-overflow-tooltip align="center">
        </el-table-column>
        <el-table-column prop="beginDate" label="开始时间" show-overflow-tooltip align="center">
        </el-table-column>
        <el-table-column prop="endDate" label="结束时间" show-overflow-tooltip align="center">
        </el-table-column>
        <el-table-column prop="nickName" label="创建人" show-overflow-tooltip align="center">
        </el-table-column>
        <el-table-column prop="clickNum" label="点击次数" show-overflow-tooltip align="center">
        </el-table-column>
        <el-table-column prop="collectNum" label="收藏" show-overflow-tooltip align="center">
        </el-table-column>
        <el-table-column prop="reviewNum" label="评论" show-overflow-tooltip align="center">
        </el-table-column>
        <el-table-column prop="isVolations" label="是否违规" show-overflow-tooltip align="center">
          <template slot-scope="scope">
            {{isVolationsObj[scope.row.isVolations]}}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" show-overflow-tooltip align="center">
          <template slot-scope="scope">
            {{statusObj[scope.row.status]}}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="400" align="center">
          <template slot-scope="scope">
            <el-button type="success" size="mini" v-if="scope.row.status == '0'" icon="el-icon-edit" @click="editareaClick(scope.row)">编辑</el-button>
            <el-button type="primary" size="mini" icon="el-icon-tickets" @click="detailsClick(scope.row)">详情</el-button>
            <el-button type="success" size="mini" v-if="scope.row.status == '0'" icon="el-icon-upload2" @click="startClick(scope.row)">上架</el-button>
            <el-button type="danger" size="mini" v-if="scope.row.status == '1'" icon="el-icon-download" @click="forbidClick(scope.row)">下架</el-button>
            <el-button type="danger" size="mini" v-if="scope.row.status == '0'" icon="el-icon-delete" @click="deleteClick1(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" justify="end">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="pageSizes" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </el-row>
    </div>

    <!-- 导入成功或失败列表 -->
    <el-dialog title="导入列表" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="daoruFlag" width="80%" :before-close="daoruClose" center>
      <div slot="title" class="header-title">
        <div class="header-title-div"></div>
        <div class="header-title-text">导入列表</div>
      </div>
      <div class="common-title-flex">
        <div class="common-title-div"></div>
        <div class="common-title-text">导入成功列表</div>
      </div>
      <el-table :data="successList" size="mini" :row-style="rowStyle" :header-cell-style="tableHeaderColor" style="width: 100%;margin-top:10px;margin-bottom:10px;" max-height="550" border>
        <el-table-column type="index" label="序号" width="50" align="center">
        </el-table-column>
        <el-table-column prop="accountName" label="账号" show-overflow-tooltip align="center">
        </el-table-column>
        <el-table-column prop="password" label="密码" width="200" show-overflow-tooltip align="center">
        </el-table-column>
        <el-table-column prop="nickName" label="昵称" show-overflow-tooltip align="center">
        </el-table-column>
        <el-table-column prop="roleId" label="角色" show-overflow-tooltip align="center">
        </el-table-column>
        <!-- <el-table-column prop="name" label="警员姓名"  show-overflow-tooltip align="center">
                </el-table-column>
                <el-table-column prop="identity" label="警员身份证"  show-overflow-tooltip align="center">
                </el-table-column>
                <el-table-column prop="phone" label="警员电话"  show-overflow-tooltip align="center">
                </el-table-column> -->
        <el-table-column prop="girdName" label="所属网格" show-overflow-tooltip align="center">
        </el-table-column>
      </el-table>
      <div class="common-title-flex">
        <div class="common-title-div"></div>
        <div class="common-title-text">导入失败列表</div>
      </div>
      <el-table :data="failList" size="mini" :row-style="rowStyle" :header-cell-style="tableHeaderColor" style="width: 100%;margin-top:10px;margin-bottom:10px;" max-height="550" border>
        <el-table-column type="index" label="序号" width="50" align="center" fixed="left">
        </el-table-column>
        <el-table-column prop="accountName" label="账号" width="150" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.accountName" placeholder="请输入账号" clearable></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="password" label="密码" width="200" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.password" placeholder="请输入密码" clearable></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="nickName" label="昵称" width="200" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.nickName" placeholder="请输入昵称" clearable></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="roleId" label="角色" width="200" align="center">
          <template slot-scope="scope">
            <el-select v-model="scope.row.roleId" placeholder="请选择选择角色" style="width:100%;" @change="chooseRoleChange3(scope.row)">
              <el-option v-for="item in chooseRoleList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="name" label="警员姓名" width="200" align="center">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.name" placeholder="请输入警员姓名" clearable ></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="identity" label="警员身份证" width="200" align="center">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.identity" placeholder="请输入警员身份证" clearable ></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="phone" label="警员电话" width="200" align="center">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.phone" placeholder="请输入警员电话" clearable ></el-input>
                    </template>
                </el-table-column> -->
        <el-table-column prop="girdName" label="所属网格" width="200" align="center">
          <template slot-scope="scope">
            <el-select v-model="scope.row.girdName" :disabled="scope.row.roleId == '2' || scope.row.roleId == '3'" placeholder="请选择所属网格" style="width:100%;">
              <el-option v-for="item in selfAreaList" :key="item.value" :label="item.gridName" :value="item.gridName">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="errorMsg" label="失败原因" width="200" show-overflow-tooltip align="center">
          <!-- <template slot-scope="scope">
                        <div style="color:red;">{{scope.row.errorMsg}}</div>
                    </template> -->
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" icon="el-icon-success" @click="confirmClick(scope.row)">确定</el-button>
            <el-button type="danger" size="mini" icon="el-icon-delete-solid" @click="deleteClick(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" :disabled="failList.length !== 0" @click="daoruClick">提交</el-button>
        <el-button size="mini" @click="daoruClose">关 闭</el-button>
      </span>
    </el-dialog>

    <el-dialog title="角色变更" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="bhFlag" width="50%" :before-close="cancel1" center>
      <div slot="title" class="header-title">
        <div class="header-title-div"></div>
        <div class="header-title-text">角色变更</div>
      </div>
      <el-form ref="inputObj1" :model="inputObj1" label-width="100px" :rules="rules1">
        <el-form-item label="选择角色" prop="roleId">
          <el-select v-model="inputObj1.roleId" placeholder="请选择选择角色" style="width:100%;" @change="chooseRoleChange1">
            <el-option v-for="item in chooseRoleList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属网格" prop="gridId" v-if="inputObj1.roleId == '5' || inputObj1.roleId == '4'">
          <el-select v-model="inputObj1.gridId" placeholder="请选择所属网格" style="width:100%;">
            <el-option v-for="item in addselfAreaList" :key="item.value" :label="item.gridName" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit1">提 交</el-button>
        <el-button @click="cancel1">取 消</el-button>
      </span>
    </el-dialog>

    <el-dialog title="辖区变更" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="areaFlag" width="50%" :before-close="cancel2" center>
      <div slot="title" class="header-title">
        <div class="header-title-div"></div>
        <div class="header-title-text">辖区变更</div>
      </div>
      <el-form ref="inputObj2" :model="inputObj2" label-width="100px" :rules="rules2">
        <el-form-item label="所属网格" prop="gridId">
          <el-select v-model="inputObj2.gridId" placeholder="请选择所属网格" @change="gridIdChange" style="width:100%;">
            <el-option v-for="item in addselfAreaList" :key="item.value" :label="item.gridName" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit2">提 交</el-button>
        <el-button @click="cancel2">取 消</el-button>
      </span>
    </el-dialog>

    <!-- 新增消息-->
    <el-dialog :title="isEditTitle" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="newaddFlag" width="36%" :before-close="cancel" center>
      <div slot="title" class="header-title">
        <div class="header-title-div"></div>
        <div class="header-title-text">{{isEditTitle}}</div>
      </div>
      <el-form ref="inputObj" :model="inputObj" label-width="100px" :rules="rules">
        <el-form-item label="广告名称" prop="adTitle">
          <el-input v-model="inputObj.adTitle" placeholder="请输入广告名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="广告位置" prop="adSort">
          <el-select v-model="inputObj.adSort" placeholder="请选择广告位置" style="width:100%;" @change="chooseRoleChange">
            <el-option v-for="item in adSortList" :key="item.dictionaryName" :label="item.dictionaryName" :value="item.dictionaryName">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="起止时间" class="required-content-red">
          <el-date-picker style="width:100%;" v-model="inputObj.createTime1" unlink-panels align="right" type="daterange" value-format="yyyyMMdd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="广告图片" class="required-content-red">
          <el-upload :limit="1" :file-list="fileList" :action="uploadUrl" :headers="uploadHeader" list-type="picture-card" :before-upload="beforeUpload" :on-success="uploadSucess" :on-error="uploadError" :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="链接" prop="adInks">
          <el-input v-model="inputObj.adInks" placeholder="请输入广告链接" clearable></el-input>
        </el-form-item>
        <el-form-item label="消息内容" prop="content">
          <el-input v-model="inputObj.content" type="textarea" :autosize="{ minRows: 5, maxRows: 8}" placeholder="请输入消息内容" clearable></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="submit">提 交</el-button>
        <el-button size="mini" @click="cancel">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 栏目详情 -->
    <el-dialog title="栏目详情" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="detailsFlag" width="50%" :before-close="detailsClose" center>
      <div slot="title" class="header-title">
        <div class="header-title-div"></div>
        <div class="header-title-text">栏目详情</div>
      </div>

      <div class="basic_information_class">
        <div class="avator_class">
          <el-row type="flex" justify="center" style="margin-top:1rem;">
            <el-image :src="tbConsultInfoVO.attachmentAddr" style="height:180px;" fit="fill"></el-image>
          </el-row>
        </div>
        <div class="avator_right_class" style="width:85%;">
          <el-row type="flex" justify="center" style="margin-top:1rem;">
            <el-col :span="4" class="bold-class">栏目名称</el-col>
            <el-col :span="8" class="grey-class">{{tbConsultInfoVO.adTitle}}</el-col>
            <el-col :span="4" class="bold-class">栏目链接</el-col>
            <el-col :span="8" class="grey-class">{{tbConsultInfoVO.adInks}}</el-col>

          </el-row>
          <el-row type="flex" justify="center">
            <el-col :span="4" class="bold-class">开始时间</el-col>
            <el-col :span="8" class="grey-class">{{tbConsultInfoVO.beginDate}}</el-col>
            <el-col :span="4" class="bold-class">结束时间</el-col>
            <el-col :span="8" class="grey-class">{{tbConsultInfoVO.endDate}}</el-col>

          </el-row>
          <el-row type="flex" justify="center">
            <el-col :span="4" class="bold-class">创建人</el-col>
            <el-col :span="8" class="grey-class">{{tbConsultInfoVO.nickName}}</el-col>
            <el-col :span="4" class="bold-class">上架状态</el-col>
            <el-col :span="8" class="grey-class">{{tbConsultInfoVO.statusDesc}}</el-col>

          </el-row>
          <el-row type="flex" justify="center">
            <el-col :span="4" class="bold-class">点击次数</el-col>
            <el-col :span="8" class="grey-class">{{tbConsultInfoVO.clickNum}}</el-col>
            <el-col :span="4" class="bold-class">收藏次数</el-col>
            <el-col :span="8" class="grey-class">{{tbConsultInfoVO.collectNum}}</el-col>
          </el-row>
          <el-row type="flex" justify="center">
            <el-col :span="4" class="bold-class">评论次数</el-col>
            <el-col :span="8" class="grey-class">{{tbConsultInfoVO.reviewNum}}</el-col>
            <el-col :span="4" class="bold-class">是否违规</el-col>
            <el-col :span="8" class="grey-class">{{tbConsultInfoVO.isVolationsDesc}}</el-col>
          </el-row>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="detailsClose">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import mixin from "@/mixin/mixin.js";
export default {
  name: "column",
  mixins: [mixin],
  data() {
    const self = this;
    return {
      isVolationsObj: {
        0: "否",
        1: "是",
      },
      adSortList: [],
      dialogImageUrl: "",
      fileList: [],
      areaFlag: false,
      inputObj2: {},
      statusObj: {
        0: "已下架",
        1: "已上架",
      },
      bhFlag: false,
      successList: [],
      failList: [],
      daoruFlag: false,
      loading: false,
      uploadHeader: {},
      uploadUrl: "/wgry/consult/uploadConsultImg",
      rules1: {
        gridId: [
          { required: true, message: "请选择所属网格", trigger: "change" },
        ],
        roleId: [{ required: true, message: "请选择角色", trigger: "change" }],
      },
      rules2: {
        gridId: [
          { required: true, message: "请选择所属网格", trigger: "change" },
        ],
      },
      rules: {
        adTitle: [
          { required: true, message: "请输入广告名称", trigger: "blur" },
        ],
        adSort: [
          { required: true, message: "请选择广告位置", trigger: "change" },
        ],
        adInks: [
          { required: true, message: "请输入广告链接", trigger: "blur" },
        ],
        content: [
          { required: true, message: "请输入消息内容", trigger: "blur" },
        ],
      },
      chooseRoleList: [
        {
          value: "5",
          label: "普通民警",
        },
        {
          value: "4",
          label: "社区民警",
        },
        {
          value: "3",
          label: "公安科所队负责人",
        },
        {
          value: "2",
          label: "综合指挥室",
        },
      ],
      detailsObj: {},
      tbConsultInfoVO: {},
      inputObj: {},
      detailsFlag: false,
      isEditTitle: "",
      newaddFlag: false,
      pageSizes: [10, 15, 50, 100],
      pagesize: 10,
      total: 10,
      currentPage: 1,
      tableData: [],
      searchObj: {},
      selfAreaList: [],
      addselfAreaList: [],
      inputObj1: {},
      currentId: "",
      imageUrl: "",
      tbAttachmentInfoDO: {},
    };
  },
  created() {
    this.uploadHeader.Authorization = this.requestToken;
    this.initadsortList();
    // this.initaddareaList();
    this.query();
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
      if (this.imageUrl && this.imageUrl.length) {
        this.deleteImgurl();
      }
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 3;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 3MB!");
      }
      return isJPG && isLt2M;
    },
    alldaochuClick() {
      let self = this;
      self.showLoading("操作中");
      let params = {
        gridName: this.searchObj.gridName,
        name: this.searchObj.name,
      };
      self
        .$axios({
          method: "post",
          headers: {
            Authorization: self.requestToken,
          },
          url: `/police/exportedPoliceList`,
          responseType: "blob",
          data: params,
        })
        .then((res) => {
          console.log(res);
          self.hideLoading();
          if (res.status == "200") {
            let href = window.URL.createObjectURL(new Blob([res.data]));
            let link = document.createElement("a");
            link.style.display = "none";
            link.href = href;
            link.setAttribute("download", "民警管理导出.xlsx");
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            window.URL.revokeObjectURL(href);
          } else {
            self.$message.error(res.data.message);
          }
        })
        .catch((err) => {
          self.hideLoading();
          self.$message.error(err);
        });
    },
    gridIdChange() {
      this.$forceUpdate();
    },
    daoruClose() {
      this.daoruFlag = false;
    },
    // 确认
    confirmClick(row) {
      let self = this;
      if (!row.roleId) {
        self.$message({
          message: "请选择角色！",
          type: "error",
        });
        return;
      }
      if (row.roleId == "4" || row.roleId == "5") {
        if (!row.girdName || !row.girdName.length) {
          self.$message({
            message: "请选择所属网格！",
            type: "error",
          });
          return;
        }
      } else {
        if (!row.accountName || !row.password || !row.nickName) {
          self.$message({
            message: "请输入必填字段再提交！",
            type: "error",
          });
          return;
        }
      }
      let params = row;
      self.showLoading();
      self
        .$axios({
          method: "post",
          url: `/police/validateFailPolice`,
          headers: {
            Authorization: self.requestToken,
          },
          data: params,
        })
        .then((res) => {
          self.hideLoading();
          if (res.data.code == "20000") {
            self.failList.forEach((item, index) => {
              if (item.id == row.id) {
                self.failList.splice(index, 1);
              }
            });
            self.successList.push(res.data.data);
            self.$message({
              message: "校验成功！",
              type: "success",
            });
          } else {
            self.$message({
              message: res.data.message,
              type: "error",
            });
          }
        })
        .catch((err) => {
          self.hideLoading();
          self.$message({
            message: err,
            type: "error",
          });
        });
    },
    daoruClick() {
      let self = this;
      let params = self.successList;
      self.showLoading();
      self
        .$axios({
          method: "post",
          url: `/police/addPoliceInfoByImport`,
          headers: {
            Authorization: self.requestToken,
          },
          data: params,
        })
        .then((res) => {
          self.hideLoading();
          if (res.data.code == "20000") {
            self.daoruFlag = false;
            self.$message({
              message: "提交成功！",
              type: "success",
            });
            self.query();
          } else {
            self.$message({
              message: res.data.message,
              type: "error",
            });
          }
        })
        .catch((err) => {
          self.hideLoading();
          self.$message({
            message: err,
            type: "error",
          });
        });
    },
    // 删除
    deleteClick(row) {
      let self = this;
      self.failList.forEach((item, index) => {
        if (item.id == row.id) {
          self.failList.splice(index, 1);
        }
      });
      self.$message({
        message: "删除成功！",
        type: "success",
      });
    },
    allExportClick() {
      let url = `${this.modelUrl}民警导入模板.xls`;
      window.open(url);
    },
    initaddareaList() {
      let self = this;
      this.$axios({
        method: "get",
        url: `/police/queryAddInitInfo`,
        headers: {
          Authorization: this.requestToken,
        },
      })
        .then((res) => {
          if (res.data.code == "20000") {
            self.addselfAreaList = res.data.data.grids;
          } else {
            this.$message.error(res.data.message);
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    // 初始化所属部门
    initApartmentList() {
      let params = {};
      this.$axios({
        method: "get",
        url: `/police/queryGirdInfo`,
        headers: {
          Authorization: this.requestToken,
        },
        data: params,
        params: params,
      })
        .then((res) => {
          if (res.data.code == "20000") {
            // this.apartmentList
            console.log(res.data);
          } else {
            this.$message.error(res.data.message);
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      return "background-color:#f5f5f5;color:#626262;";
    },
    rowStyle({ row, rowIndex }) {
      let style1 = {};
      let style2 = {};
      if (rowIndex % 2 == 0) {
        style1.background = "#ffffff";
        return style1;
      } else {
        style2.background = "#f5f5f5";
        return style2;
      }
    },
    // 初始化所属责任区
    initadsortList() {
      let params = {};
      this.$axios({
        method: "get",
        url: `/consult/queryFreeSpaceConsult`,
        headers: {
          Authorization: this.requestToken,
        },
        data: params,
        params: params,
      })
        .then((res) => {
          if (res.data.code == "20000") {
            this.adSortList = res.data.data;
          } else {
            this.$message.error(res.data.message);
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    chooseRoleChange3(row) {
      if (row.roleId == "2" || row.roleId == "3") {
        row.girdName = "";
      }
    },
    // 选择角色
    chooseRoleChange(value) {
      if (value == "2" || value == "3") {
        this.inputObj.gridId = "";
      }
    },
    chooseRoleChange1(value) {
      console.log(value);
      if (value == "2" || value == "3") {
        this.inputObj1.gridId = "";
      }
    },
    beforeUpload(file) {
      console.log(file);
      let fileSize = file.size;
      if (fileSize > 1024 * 1024 * 2) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
        return false;
      } else {
        this.showLoading();
        return true;
      }
    },
    uploadSucess(response) {
      this.hideLoading();
      if (response.code == "20000") {
        this.$message({
          message: "上传成功！",
          type: "success",
        });
        this.imageUrl = response.data.attachmentAddr;
        this.tbAttachmentInfoDO = response.data;
        console.log("response---->:", response);
      } else {
        this.$message({
          message: response.message,
          type: "error",
        });
      }
    },
    uploadError(error) {
      this.$message({
        message: "导入失败！",
        type: "error",
      });
      this.hideLoading();
      console.log("error-----", error);
    },
    cancel2() {
      this.areaFlag = false;
      this.inputObj2 = {};
      this.$refs["inputObj2"].resetFields();
    },
    submit2() {
      let self = this;
      this.$refs["inputObj2"].validate((valid) => {
        if (valid) {
          self.showLoading();
          self
            .$axios({
              method: "get",
              url: `/police/editGirdById/${self.currentId}/${self.inputObj2.gridId}`,
              headers: {
                Authorization: self.requestToken,
              },
            })
            .then((res) => {
              self.hideLoading();
              if (res.data.code == "20000") {
                self.$message.success("变更成功！");
                self.areaFlag = false;
                self.inputObj2 = {};
                self.$refs["inputObj2"].resetFields();
                self.query();
              } else {
                self.$message.error(res.data.message);
              }
            })
            .catch((err) => {
              self.hideLoading();
              self.$message.error(err);
            });
        } else {
          return false;
        }
      });
    },
    submit1() {
      let self = this;
      this.$refs["inputObj1"].validate((valid) => {
        if (valid) {
          self.showLoading();
          self
            .$axios({
              method: "get",
              url: `/police/editRoleById/${self.currentId}/${self.inputObj1.roleId}/${self.inputObj1.gridId}`,
              headers: {
                Authorization: self.requestToken,
              },
            })
            .then((res) => {
              self.hideLoading();
              if (res.data.code == "20000") {
                self.$message.success("变更成功！");
                self.bhFlag = false;
                self.inputObj1 = {};
                self.$refs["inputObj1"].resetFields();
                self.query();
              } else {
                self.$message.error(res.data.message);
              }
            })
            .catch((err) => {
              self.hideLoading();
              self.$message.error(err);
            });
        } else {
          return false;
        }
      });
    },
    // 新建确认和修改确认
    submit() {
      let self = this;
      this.$refs["inputObj"].validate((valid) => {
        if (valid) {
          if (self.isEditTitle == "新增栏目") {
            let beginDate = "";
            let endDate = "";
            if (self.inputObj.createTime1 && self.inputObj.createTime1.length) {
              beginDate = self.inputObj.createTime1[0];
              endDate = self.inputObj.createTime1[1];
            } else {
              beginDate = "";
              endDate = "";
            }
            let params = self.inputObj;
            params.beginDate = beginDate;
            params.endDate = endDate;
            let obj = {
              tbConsultInfoDO: params,
              tbAttachmentInfoDO: self.tbAttachmentInfoDO,
            };
            self.showLoading();
            self
              .$axios({
                method: "post",
                url: `/consult/addConsultInfoVO`,
                headers: {
                  Authorization: self.requestToken,
                },
                data: obj,
              })
              .then((res) => {
                self.hideLoading();
                if (res.data.code == "20000") {
                  self.$message.success("新增成功！");
                  self.newaddFlag = false;
                  self.inputObj = {};
                  self.$refs["inputObj"].resetFields();
                  self.fileList = [];
                  self.query();
                } else {
                  self.$message.error(res.data.message);
                }
              })
              .catch((err) => {
                self.hideLoading();
                self.$message.error(err);
              });
          } else {
            let beginDate = "";
            let endDate = "";
            if (self.inputObj.createTime1 && self.inputObj.createTime1.length) {
              beginDate = self.inputObj.createTime1[0];
              endDate = self.inputObj.createTime1[1];
            } else {
              beginDate = "";
              endDate = "";
            }
            let params = self.inputObj;
            params.beginDate = beginDate;
            params.endDate = endDate;
            let obj = {
              tbConsultInfoVO: params,
              tbAttachmentInfoDO: self.tbAttachmentInfoDO,
            };
            self.showLoading();
            self
              .$axios({
                method: "post",
                url: `/consult/editConsultInfo`,
                headers: {
                  Authorization: self.requestToken,
                },
                data: obj,
              })
              .then((res) => {
                self.hideLoading();
                if (res.data.code == "20000") {
                  self.$message.success("修改成功！");
                  self.newaddFlag = false;
                  self.inputObj = {};
                  self.fileList = [];
                  self.$refs["inputObj"].resetFields();
                  self.query();
                } else {
                  self.$message.error(res.data.message);
                }
              })
              .catch((err) => {
                self.hideLoading();
                self.$message.error(err);
              });
          }
        } else {
          return false;
        }
      });
    },
    // 取消点击
    cancel() {
      this.newaddFlag = false;
      this.inputObj = {};
      this.fileList = [];
      this.$refs["inputObj"].resetFields();
      if (this.isEditTitle == "新增栏目") {
        if (this.imageUrl && this.imageUrl.length) {
          this.deleteImgurl();
        }
      }
    },
    deleteImgurl() {
      let params = {
        filePath: this.imageUrl,
      };
      this.$axios({
        method: "get",
        url: `/consult/deleteConsultImg`,
        headers: {
          Authorization: this.requestToken,
        },
        data: params,
        params: params,
      })
        .then((res) => {
          if (res.data.code == "20000") {
            this.imageUrl = "";
          } else {
            this.$message({
              message: res.data.message,
              type: "error",
            });
          }
        })
        .catch((err) => {
          this.$message({
            message: err,
            type: "error",
          });
        });
    },
    cancel1() {
      this.bhFlag = false;
      this.inputObj1 = {};
      this.$refs["inputObj1"].resetFields();
    },
    // 点击分页当前页多少数据
    handleSizeChange(val) {
      this.pagesize = val;
      this.query();
    },
    // 点击分页页数
    handleCurrentChange(val) {
      this.currentPage = val;
      this.query();
    },
    // 查询
    query() {
      let params = {
        adTitle: this.searchObj.name,
        pageNumber: this.currentPage,
        pageSize: this.pagesize,
      };
      this.showLoading();
      this.$axios({
        method: "post",
        url: `/consult/queryConsultInfoVOList`,
        headers: {
          Authorization: this.requestToken,
        },
        data: params,
        params: params,
      })
        .then((res) => {
          this.hideLoading();
          console.log("res---->:", res);
          if (res.data.code == "20000") {
            this.tableData = res.data.data.list;
            this.pagesize = res.data.data.pageSize;
            this.currentPage = res.data.data.pageNumber;
            this.total = res.data.data.total;
          } else if (res.data.code == "30002") {
            this.$router.push("/login");
          } else {
            this.$message({
              message: res.data.message,
              type: "error",
            });
          }
        })
        .catch((err) => {
          this.hideLoading();
          this.$message({
            message: err,
            type: "error",
          });
        });
    },
    //  点击重置
    reset() {
      this.searchObj = {};
      this.query();
    },
    // 上架
    startClick(row) {
      let self = this;
      this.$confirm("请确认是否上架该栏目?", "上架", {
        confirmButtonText: "是",
        cancelButtonText: "否",
      })
        .then(() => {
          self.showLoading();
          let params = {
            id: row.id,
            status: "1",
          };
          self
            .$axios({
              method: "get",
              url: `/consult/editConsultStatus`,
              headers: {
                Authorization: self.requestToken,
              },
              params: params,
            })
            .then((res) => {
              self.hideLoading();
              if (res.data.code == "20000") {
                self.$message.success("上架成功！");
                self.query();
              } else {
                self.$message.error(res.data.message);
              }
            })
            .catch((err) => {
              self.hideLoading();
              self.$message.error(err);
            });
        })
        .catch(() => {
          self.$message({
            type: "info",
            message: "已取消启用",
          });
        });
    },
    // 删除
    deleteClick1(row) {
      this.$confirm("请确认是否删除该栏目?", "删除", {
        confirmButtonText: "是",
        cancelButtonText: "否",
      })
        .then(() => {
          this.showLoading();
          let params = {
            id: row.id,
            status: "0",
          };
          this.$axios({
            method: "get",
            url: `/consult/deleteConsultInfo`,
            headers: {
              Authorization: this.requestToken,
            },
            params: params,
          })
            .then((res) => {
              this.hideLoading();
              if (res.data.code == "20000") {
                this.$message.success("删除成功！");
                this.query();
              } else {
                this.$message.error(res.data.message);
              }
            })
            .catch((err) => {
              this.hideLoading();
              this.$message.error(err);
            });
        })
        .catch(() => {
          console.log("取消删除");
        });
    },
    // 下架
    forbidClick(row) {
      let self = this;
      this.$confirm("请确认是否下架该栏目?", "下架", {
        confirmButtonText: "是",
        cancelButtonText: "否",
      })
        .then(() => {
          self.showLoading();
          let params = {
            id: row.id,
            status: "0",
          };
          self
            .$axios({
              method: "get",
              url: `/consult/editConsultStatus`,
              headers: {
                Authorization: self.requestToken,
              },
              params: params,
            })
            .then((res) => {
              self.hideLoading();
              if (res.data.code == "20000") {
                self.$message.success("下架成功！");
                self.query();
              } else {
                self.$message.error(res.data.message);
              }
            })
            .catch((err) => {
              self.hideLoading();
              self.$message.error(err);
            });
        })
        .catch(() => {});
    },
    // 点击新增
    addPolice() {
      this.newaddFlag = true;
      this.isEditTitle = "新增栏目";
    },
    // 点击详情展示
    detailsClick(row) {
      let self = this;
      self.showLoading();
      let params = {
        id: row.id,
      };
      self
        .$axios({
          method: "get",
          url: `/consult/queryConsultDetail`,
          headers: {
            Authorization: self.requestToken,
          },
          params: params,
        })
        .then((res) => {
          self.hideLoading();
          if (res.data.code == "20000") {
            self.detailsFlag = true;
            self.tbConsultInfoVO = res.data.data.tbConsultInfoVO;
            self.tbConsultInfoVO.statusDesc =
              self.tbConsultInfoVO.status == "0" ? "已下架" : "已上架";
            self.tbConsultInfoVO.isVolationsDesc =
              self.tbConsultInfoVO.isVolations == "0" ? "否" : "是";
          } else {
            self.$message.error(res.data.message);
          }
        })
        .catch((err) => {
          self.hideLoading();
          self.$message.error(err);
        });
    },
    // 详情关闭
    detailsClose() {
      this.detailsFlag = false;
    },
    // 详情
    editareaClick(row) {
      let self = this;
      self.isEditTitle = "编辑栏目";
      self.currentId = row.id;
      self.showLoading();
      self
        .$axios({
          method: "get",
          url: `/consult/queryConsultDetail`,
          headers: {
            Authorization: self.requestToken,
          },
          params: { id: row.id },
        })
        .then((res) => {
          self.hideLoading();
          if (res.data.code == "20000") {
            self.newaddFlag = true;
            self.inputObj = res.data.data.tbConsultInfoVO;
            self.inputObj.createTime1 = [
              res.data.data.tbConsultInfoVO.beginDate,
              res.data.data.tbConsultInfoVO.endDate,
            ];
            self.fileList = [
              {
                name: res.data.data.tbConsultInfoVO.attachmentName,
                url: res.data.data.tbConsultInfoVO.attachmentAddr,
              },
            ];
            self.imageUrl = res.data.data.tbConsultInfoVO.attachmentAddr;
            self.tbAttachmentInfoDO = res.data.data.tbAttachmentInfoDO;
          } else {
            self.$message.error(res.data.message);
          }
        })
        .catch((err) => {
          self.hideLoading();
          self.$message.error(err);
        });
    },
  },
};
</script>
<style scoped>
/* .el-switch__core:after {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    border-radius: 100%;
    transition: all .3s;
    width: 16px;
    height: 16px;
    background-color: #fff;
  }
  .el-switch.is-checked .el-switch__core:after {
    left: 100%;
    margin-left: -17px;
  } */
.common-title-flex {
  display: flex;
}
.common-title-div {
  width: 3px;
  height: 16px;
  background-color: #368af7;
  margin-top: 2px;
}
.common-title-text {
  margin-left: 4px;
  font-size: 14px;
}
.common-list-class {
  display: flex;
  justify-content: space-between;
  margin-top: -10px;
}
.upload-file >>> .el-upload--text {
  border: none;
  width: 100px;
  height: 36px;
}
.gridName_select_class >>> .el-input__inner {
  width: 200px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>>